<template>
	<view class="luckyPalaceGridContainer">
		<view style="margin-left: 102rpx;">
			<LotteryDraw @get_winingIndex='get_winingIndex' @luck_draw_finish='luck_draw_finish' :grid_info_arr='prizeList'>
			</LotteryDraw>
		</view>
		<view class="lotteryNum">
			<!-- 本次有{{allcount}}次抽奖机会 -->
		</view>
		<!-- <image class="image-1" src="../../static/35.png" mode="" @click="get_winingIndex"></image> -->
		<view class="img-106">
			<scroll-view :scroll-y="true" class="detail">{{obj.activityDescription}}</scroll-view>
		</view>
		
		<view style="height: 150rpx;"></view>
		
		<image class="img-35" @click="getWin()" src="../../static/105.png"></image>
		
		
		
		<!-- <view class="myAward" @click="myAwardGo">
			<text>我的奖品</text>
		</view> -->
		
		<view class="pos-right" @click="myAwardGo">我的奖品</view>
		
		<view class="pos-left" v-if="user.id">
			<image class="head" :src="user.head"></image>
			<view class="pos-name font-overflow">{{user.nickname}}</view>
			<view v-if="obj.releaseChannel == 1" @click="getOpenHomepage()" class="pos-but">关注</view>
		</view>
		
		<sunui-popup ref="popRef">
			<template v-slot:content>
				<view class="pop-bg">
					<view class="pop-name">{{pName}}</view>
					<view class="pop-detail">快去发布作品领取您的奖品吧!</view>
					<view class="but-bg" @click="getWin()">去发布</view>
				</view>
			</template>
		</sunui-popup>
		
		<sunui-popup ref="popExhaustRef">
			<template v-slot:content>
				<view class="pop-exhaust-bg">
					
				</view>
			</template>
		</sunui-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//九宫格
				lottery_draw_param:{
					startIndex: 0, //开始抽奖位置，从0开始
					totalCount: 5, //一共要转的圈数
					winingIndex: 4, //中奖的位置，从0开始
					speed: 70 //抽奖动画的速度 [数字越大越慢,默认100]
				},

				id: '',
				uid: '',
				allcount: 1,
				
				prId: '', //中奖记录ID
				pName: '', //奖品名称

				targetIndex: '',
				
				user: {}, //抖音，快手用户数据
				
				obj: {},
				prizeList: [],
				
				stopIssue: false,
			}
		},

		onLoad(options) {
			if (options.id && options.uid){
				this.id = options.id;
				this.uid = options.uid;
				this.detail();
			}
		},

		onShow() {
			this.$at.releaseKey('activityDraw');
			this.$at.releaseKey('getShare');
		},

		methods: {
			
			openExhaustRef() {
				this.$refs.popExhaustRef.show({
					anim: 'center',
					shadeClose: true, //false使用户不能点击其它关闭页面
					bottomClose: true,
				});
			},
			
			openRef(pName) {
				this.pName = pName;
				this.$refs.popRef.show({
					anim: 'center',
					shadeClose: false, //false使用户不能点击其它关闭页面
					bottomClose: false,
				});
			},
			
			//抖音跳转商家主页
			async getOpenHomepage() {
				const result = await this.$http.get({
					url: this.$api.getUserProfile,
					data: {
						openId: this.user.openId,
					}
				});
				if (result.code == 2000) {
					window.location.href = result.data.data.schema;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
				
			},
			
			//抖音、快手用户数据
			async dUser() {
				const result = await this.$http.get({
					url: this.$api.selectMerchantFollowMe,
					data: {
						merchantId: this.obj.merchantId,
					}
				});
				if (result.code == 2000) {
					this.user = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			//点击跳转到我的奖品页面
			myAwardGo() {
				if (!this.stopIssue) {
					uni.navigateTo({
						url: '/pages/index/myPrize?id='+this.id+'&uid='+this.uid + '&releaseChannel='+this.obj.releaseChannel
					})
				} else {
					this.$sun.toast('正在抽奖无法查看我的奖品','none')
				}
			},
			
			//活动详情
			async detail() {
				const result = await this.$http.get({
					url: this.$api.selectGetId,
					data: {
						id: this.id,
					}
				});
				if (result.code == 2000) {
					this.prizeList = result.data.listofprizes;
					this.prizeList.push([])
					this.obj = result.data;
					this.dUser();
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},

			//转发快手视频
			async getForward(winningId) {
				uni.showLoading({
					title: '转发视频中..'
				})
				const result = await this.$http.get({
					url: this.$api.videoForwarding,
					data: {
						shopId: this.id,
						uid: this.uid,
						winningId: winningId
					}
				});
				if (result.code == 2000) {
					uni.hideLoading()
					uni.showModal({
						title: '提示',
						content: result.msg,
						showCancel: false,
						success: res => {
							uni.navigateBack();
						}
					});
				} else {
					uni.hideLoading()
					this.$sun.toast(result.msg, 'none');
				}
			},
			
			// 转发抖音视频
			async sendVideo(winningId) {
				uni.showLoading({
					title: '转发视频中..'
				})
				const result = await this.$http.get({
					url: this.$api.getShare,
					data: {
						uid: this.uid,
						shopId: this.id,
						winningId: winningId
					}
				});
				if (result.code == 2000) {
					uni.hideLoading()
					this.jump(result.data);
				} else {
					uni.hideLoading()
					this.$sun.toast('发布失败请重新发布','none');
				}
			},
			

			jump(dyShares) {
				this.$at.uniDoFunc({
					// 键名
					key: 'getShare',
					// 是否立即触发,默认触发
					// instant: true,
					success: async () => {
						//锁定
						this.$at.lockKey('getShare');
						/*
						 * video_path:视频url
						 * image_path:图片url
						 * share_to_publish ? 0 默认(跳转视频编辑页) : 1（跳转视频发行页）
						 * hashTags 转发视频 话题
						 * s_type 挂载类型 1 抖音POI（地址） 2小程序 3 没有
						 *  app_id 小程序id
						 *  app_title 小程序标题
						 *  app_url 小程序地址
						 *  poi_id POI地址
						 */
						// const hashTags = [dyShares.hashtag_list];
						const url = new URL('snssdk1128://openplatform/share');
						var query = url.searchParams;
						query.append('hashtag_list', JSON.stringify(dyShares.hashtag_list));
						query.append('client_key', dyShares.client_key);
						query.append('state', dyShares.state);
						query.append('nonce_str', dyShares.nonce_str);
						query.append('timestamp', dyShares.timestamp);
						query.append('signature', dyShares.signature);
						query.append('share_type', dyShares.share_type);
						query.append('video_path', dyShares.video_path);
						query.append('title', dyShares.tilte);
						if (dyShares.poi_id){
							query.append('poi_id', dyShares.poi_id);
						}
						// query.append("image_path", "https://sf3-cdn-tos.douyinstatic.com/obj/douyin-open-static/tiktok.open/home/d_logo.png")
						query.append('share_to_publish', dyShares.share_to_publish);

						if (dyShares.mountType == 2) {
							query.append(
								'micro_app_info',
								JSON.stringify({
									appId: dyShares.app_id,
									appTitle: dyShares.app_title,
									appUrl: dyShares.app_url
								})
							);
						}
						window.location.href = url;
						setTimeout(() => {
							this.$at.releaseKey('getShare');
						}, 3500);
					}
				});
			},

			/*  九宫格  */

			// 修改获奖位置（可以在这里获取后台的数据
			get_winingIndex(callback){
				//props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
				this.$at.uniDoFunc({
					key: 'activityDraw',
					success: async () => {
						//锁定
						this.$at.lockKey('activityDraw');

						const result = await this.$http.post({
							url: this.$api.activityDraw,
							data: {
								uId: this.uid,
								shopCodeId: this.id,
							}
						});
						if (result.code == 2000) {
							this.stopIssue = true;
							this.$at.releaseKey('activityDraw');
							for (var i = 0; i < this.prizeList.length; i++){
								if (result.data.listofprizesId == this.prizeList[i].id){
									this.prId = result.data.winningRecordId;
									this.lottery_draw_param.winingIndex=i;
									//props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
									callback(this.lottery_draw_param);
								}
							}

						} else {
							this.$at.releaseKey('activityDraw');
							this.$sun.toast(result.msg,'none');
						}
					}
				});
			},
			// 抽奖完成
			luck_draw_finish(param){
				let prizeName = this.prizeList[this.lottery_draw_param.winingIndex].prizeName;
				let prizeCount = this.prizeList[this.lottery_draw_param.winingIndex].quantity;
				// this.prId = this.prizeList[this.lottery_draw_param.winingIndex].id;
				this.stopIssue = false;
				if (prizeCount == 0) {
					
					this.openExhaustRef();
					
					// uni.showModal({
					// 	title: '提示',
					// 	content: `奖品 ${prizeName} 已抽完,谢谢参与!`,
					// 	showCancel: false,
					// 	success: res => {
					// 		if (res.confirm) {
					// 			this.$sun.back();
					// 		}
					// 	}
					// });
				}else {
					
					this.openRef(prizeName);
					
					// uni.showModal({
					// 	title: '提示',
					// 	content: `您抽中了${prizeName}`,
					// 	showCancel: false,
					// 	success: res => {
					// 		if (res.confirm) {
					// 			if (this.obj.releaseChannel == 1) {
					// 				setTimeout(() => {
					// 					this.sendVideo(this.prId)
					// 				}, 1000)
					// 			}
					// 			if (this.obj.releaseChannel == 3) {
					// 				setTimeout(() => {
					// 					this.getForward(this.prId)
					// 				}, 1000)
					// 			}
					// 		}
					// 	}
					// });
				}
			},
			
			getWin() {
				if (this.prId) {
					if (this.obj.releaseChannel == 1) {
						setTimeout(() => {
							this.sendVideo(this.prId)
						}, 1000)
					}
					if (this.obj.releaseChannel == 3) {
						setTimeout(() => {
							this.getForward(this.prId)
						}, 1000)
					}
				}else {
					this.$sun.toast('请先进行抽奖','error');
				}
			},

		},

	}
</script>

<style lang="scss">
	
	.pop-detail {
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		margin-left: 20rpx;
	}
	
	.pop-name {
		color: #FFBC5E;
		padding-top: 420rpx;
		text-align: center;
		font-weight: bold;
		font-size: 50rpx;
		margin-bottom: 20rpx;
	}
	
	.but-bg {
		width: 332rpx;
		height: 74rpx;
		background: url('~static/116.png');
		background-size: contain;
		background-repeat: no-repeat;
		text-align: center;
		color: #FFFFFF;
		margin-left: 168rpx;
		margin-top: 60rpx;
		padding-top: 20rpx;
	}
	
	.pop-exhaust-bg {
		width: 630rpx;
		height: 760rpx;
		background-color: #FFFFFF;
		background: url('~static/117.png');
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.pop-bg {
		width: 630rpx;
		height: 760rpx;
		background-color: #FFFFFF;
		background: url('~static/115.png');
		background-size: contain;
		background-repeat: no-repeat;
		// position: relative;
	}
	
	.pos-right {
		width: 150rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.40);
		border-radius: 200rpx 0px 0px 200rpx;
		color: #FFFFFF;
		position: fixed;
		top: 30rpx;
		right: 0;
		z-index: 99;
		padding: 10rpx 0;
	}
	
	.detail {
		width: 580rpx;
		height: 340rpx;
		color: #FFFFFF;
		padding: 120rpx 40rpx 40rpx;
	}
	
	.img-106 {
		background: url('~static/106.png');
		width: 674rpx;
		height: 526rpx;
		background-repeat: no-repeat;
		background-size: contain;
		margin: 120rpx 38rpx 40rpx 38rpx;
	}
	
	.pos-but {
		width: 80rpx;
		border-radius: 36rpx;
		background-color: #FFBC00;
		color: #FFFFFF;
		font-size: 24rpx;
		text-align: center;
		padding: 10rpx;
	}
	
	.pos-name {
		width: 160rpx;
		color: #FFFFFF;
	}
	
	.head {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: #aaaaaa;
		margin-right: 14rpx;
	}
	
	.pos-left {
		width: 320rpx;
		background: rgba(0, 0, 0, 0.40);
		border-radius: 60rpx;
		z-index: 99;
		position: fixed;
		top: 30rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.img-35 {
		width: 510rpx;
		height: 108rpx;
		position: fixed;
		bottom: 40rpx;
		left: 120rpx;
		z-index: 99;
	}
	
	.luckyPalaceGridContainer {
		position: relative;
		background: url('~static/33.png');
		width: 750rpx;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: contain;
		padding: 468rpx 0 20rpx 0;

		.lotteryNum {
			position: absolute;
			top: 390rpx;
			left: 250rpx;
			z-index: 10;
			color: #B7712A;
			font-weight: 700;
		}

		.image-1 {
			width: 564rpx;
			height: 136rpx;
			margin-top: 120rpx;
		}

		.myAward {
			text-align: center;
			line-height: 64rpx;
			position: absolute;
			width: 152rpx;
			height: 64rpx;
			border-radius: 200rpx 0rpx 0rpx 200rpx;
			background: rgba(0, 0, 0, 0.50);
			top: 44rpx;
			right: 0;
			color: #fff;
			font-size: 28rpx;
		}
	}


	page {
		background-color: #0061FF;
	}
	
</style>